<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="1250px">
		<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
			<el-row :gutter="10" class="mb20">
				<el-col v-if="form.merchant_no" :span="12">
					<el-form-item label="商户号" prop="merchant_no">
						<el-input v-model="form.merchant_no" disabled />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="商户状态" prop="entry_status">
						<el-input v-model="form.entry_status" disabled />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row v-if="form.entry_status !== '审核通过' && form.remark" :gutter="10" class="mb20">
				<el-col :span="24">
					<el-form-item label="失败原因" prop="remark">
						<el-input v-model="form.remark" disabled />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="签约名" prop="signName">
						<el-input v-model="form.signName" placeholder="请输入签约名" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="子商户类型" prop="merchantType">
						<el-radio-group v-model="form.merchantType">
							<el-radio label="ENTERPRISE">企业商户</el-radio>
							<el-radio label="INSTITUTION">事业单位商户</el-radio>
							<el-radio label="INDIVIDUALBISS">个体工商户</el-radio>
							<!-- <el-radio label="PERSON">个人商户</el-radio> -->
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="法人姓名" prop="legalPerson">
						<el-input v-model="form.legalPerson" placeholder="请输入法人姓名" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="身份证证件号" prop="legalPersonID">
						<el-input v-model="form.legalPersonID" placeholder="请输入身份证证件号" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="证件类型" prop="idType">
						<el-radio-group v-model="form.idType">
							<el-radio label="IDCARD">身份证</el-radio>
							<el-radio label="PASSPORT">护照</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="证件有效期" prop="idTimeType">
						<el-radio-group v-model="form.idTimeType">
							<el-radio label="0">非长期</el-radio>
							<el-radio label="1">长期</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="证件开始日期" prop="idCardStartDate">
						<el-date-picker
							v-model="form.idCardStartDate"
							type="date"
							clearable
							value-format="YYYYMMDD"
							placeholder="请选择证件开始日期"
							class="w100"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="证件结束日期" prop="idCardEndDate">
						<el-input v-if="Number(form.idTimeType)" v-model="longTerm" disabled />
						<el-date-picker
							v-else
							v-model="form.idCardEndDate"
							type="date"
							clearable
							value-format="YYYYMMDD"
							placeholder="请选择证件结束日期"
							class="w100"
						/>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="联系人" prop="linkman">
						<el-input v-model="form.linkman" placeholder="请输入联系人" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="联系电话" prop="linkPhone">
						<el-input v-model="form.linkPhone" type="number" placeholder="请输入联系电话" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="联系人身份证号" prop="linkManId">
						<el-input v-model="form.linkManId" placeholder="请输入联系人身份证号" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="结算卡类型" prop="settleBankType">
						<el-radio-group v-model="form.settleBankType">
							<el-radio label="TOPUBLIC">对公</el-radio>
							<el-radio label="TOPRIVATE">对私</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="结算账户开户名" prop="accountName">
						<el-input v-model="form.accountName" placeholder="请输入结算账户开户名" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="结算银行卡账号" prop="accountNo">
						<el-input v-model="form.accountNo" placeholder="请输入结算银行卡账号" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="结算人手机号" prop="settlementPhoneNo">
						<el-input v-model="form.settlementPhoneNo" type="number" placeholder="请输入结算人手机号" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="结算卡联行号" prop="bankCode">
						<el-input v-model="form.bankCode" placeholder="请输入结算卡联行号" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="营业执照号" prop="businessLicense">
						<el-input v-model="form.businessLicense" placeholder="请输入营业执照号" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="经营有效期" prop="businessDateLimitType">
						<el-radio-group v-model="form.businessDateLimitType">
							<el-radio label="0">非长期</el-radio>
							<el-radio label="1">长期</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="经营起始日期" prop="businessDateStart">
						<el-date-picker
							v-model="form.businessDateStart"
							type="date"
							clearable
							value-format="YYYYMMDD"
							placeholder="请选择经营起始日期"
							class="w100"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="经营截至日期" prop="businessDateLimit">
						<el-input v-if="Number(form.businessDateLimitType)" v-model="longTerm" disabled />
						<el-date-picker
							v-else
							v-model="form.businessDateLimit"
							type="date"
							clearable
							value-format="YYYYMMDD"
							placeholder="请选择经营截至日期"
							class="w100"
						/>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="24">
					<el-form-item label="详细地址" prop="address">
						<el-input v-model="form.address" :rows="3" type="textarea" placeholder="请输入详细地址" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" :loading="submitLoading" @click="onSubmitForm"> 确 定 </el-button>
				<el-button @click="onCancel">取 消</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { ElMessage } from 'element-plus';
import { supplierMchidHlbAdd, supplierMchidHlbEdit, supplierMchidHlbSelete } from '/@/api/admin';
export default {
	name: 'editBasisInfoDialog',
	setup() {
		const validateLinkman = (rule: any, value: any, callback: Function) => {
			if (state.form.merchantType != 'PERSON' && !value) {
				callback(new Error('联系人不能为空'));
			} else {
				callback();
			}
		};
		const validateLinkPhone = (rule: any, value: any, callback: Function) => {
			if (state.form.merchantType != 'PERSON' && !value) {
				callback(new Error('联系电话不能为空'));
			} else {
				callback();
			}
		};
		const validateLinkManId = (rule: any, value: any, callback: Function) => {
			if (state.form.merchantType != 'PERSON' && !value) {
				callback(new Error('联系人身份证号不能为空'));
			} else {
				callback();
			}
		};
		const validateBusinessLicense = (rule: any, value: any, callback: Function) => {
			if (state.form.merchantType != 'PERSON' && !value) {
				callback(new Error('营业执照号不能为空'));
			} else {
				callback();
			}
		};
		const validateAddress = (rule: any, value: any, callback: Function) => {
			if (state.form.merchantType != 'PERSON' && !value) {
				callback(new Error('注册地址不能为空'));
			} else {
				callback();
			}
		};
		const validateBusinessDateLimit = (rule: any, value: any, callback: Function) => {
			if (state.form.merchantType != 'PERSON' && state.form.businessDateLimitType == '0' && !value) {
				callback(new Error('经营结束日期不能为空'));
			} else {
				callback();
			}
		};
		const validateSettlementPhoneNo = (rule: any, value: any, callback: Function) => {
			if (state.form.merchantType == 'PERSON' && !value) {
				callback(new Error('结算人手机号不能为空'));
			} else {
				callback();
			}
		};
		const validateIdCardEndDate = (rule: any, value: any, callback: Function) => {
			if (state.form.idTimeType == '0' && !value) {
				callback(new Error('身份证结束日期不能为空'));
			} else {
				callback();
			}
		};
		let callback: Function = () => {};
		const formRef = ref(null);
		const state = reactive({
			title: '修改基础信息',
			open: false,
			form: {} as any,
			rules: {
				signName: [{ required: true, message: '签约名不能为空', trigger: 'blur' }],
				legalPerson: [{ required: true, message: '法人姓名不能为空', trigger: 'blur' }],
				legalPersonID: [{ required: true, message: '身份证件号不能为空', trigger: 'blur' }],
				idCardStartDate: [{ required: true, message: '身份证开始日期不能为空', trigger: 'blur' }],
				idCardEndDate: [{ required: false, validator: validateIdCardEndDate, trigger: 'blur' }],
				linkman: [{ required: false, validator: validateLinkman, trigger: 'blur' }],
				linkPhone: [{ required: false, validator: validateLinkPhone, trigger: 'blur' }],
				linkManId: [{ required: false, validator: validateLinkManId, trigger: 'blur' }],
				bankCode: [{ required: true, message: '结算卡联行号不能为空', trigger: 'blur' }],
				accountName: [{ required: true, message: '结算银行卡开户名不能为空', trigger: 'blur' }],
				accountNo: [{ required: true, message: '结算银行卡账号不能为空', trigger: 'blur' }],
				settleBankType: [{ required: true, message: '结算卡类型不能为空', trigger: 'blur' }],
				settlementPhoneNo: [{ required: false, validator: validateSettlementPhoneNo, trigger: 'blur' }],
				businessLicense: [{ required: false, validator: validateBusinessLicense, trigger: 'blur' }],
				address: [{ required: false, validator: validateAddress, trigger: 'blur' }],
				businessDateStart: [{ required: true, message: '经营起始日期不能为空', trigger: 'blur' }],
				businessDateLimit: [{ required: false, validator: validateBusinessDateLimit, trigger: 'blur' }],
			}, // 表单校验
			submitLoading: false,
			supplierId: '',
			type: 'add',
			longTerm: '长期有效',
		});

		/********** 点击事件(on开头) **********/
		/** 提交按钮 */
		const onSubmitForm = () => {
			(formRef.value as any)?.validate((valid: boolean) => {
				if (valid) {
					state.submitLoading = true;
					if (Number(state.form.businessDateLimitType)) {
						state.form.businessDateLimit = '11111111';
					}
					if (Number(state.form.idTimeType)) {
						state.form.idCardEndDate = '长期有效';
					}
					if (state.type == 'add') {
						_supplierMchidHlbAdd(state.form);
					} else {
						_supplierMchidHlbEdit(state.form);
					}
				}
			});
		};
		// 取消按钮
		const onCancel = () => {
			state.submitLoading = false;
			state.open = false;
			reset();
		};

		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any, fn: Function) => {
			console.log(config);
			callback = fn;
			state.open = true;
			reset();
			_supplierMchidHlbSelete(config);
		};
		// 表单重置
		const reset = () => {
			state.form = {
				signName: '',
				entry_status: '',
				remark: '',
				merchantType: '',
				legalPerson: '',
				legalPersonID: '',
				idTimeType: '',
				idType: '',
				idCardStartDate: '',
				idCardEndDate: '',
				linkman: '',
				linkPhone: '',
				linkManId: '',
				bankCode: '',
				businessDateLimitType: '',
				accountName: '',
				accountNo: '',
				settleBankType: '',
				settlementPhoneNo: '',
				businessLicense: '',
				address: '',
				businessDateStart: '',
				businessDateLimit: '',
			};
			(formRef.value as any)?.resetFields();
		};
		/*****************************网络请求***************************/
		// 查询供应商进件详情
		const _supplierMchidHlbSelete = (params: object) => {
			supplierMchidHlbSelete(params).then((res: any) => {
				const info = res.data.info;
				let entry_status = '';
				switch (info.entry_status) {
					case 'AUDITED':
						entry_status = '审核通过';
						break;
					case 'INIT':
						entry_status = '待审核';
						break;
					case 'OVERRULE':
						entry_status = '申请驳回';
						break;
					case 'WAIT_VERIFY':
						entry_status = '待验证';
						break;
					default:
						entry_status = '待提交';
				}
				state.form = {
					supplier_id: info.supplier_id,
					merchant_no: info.merchant_no,
					signName: info.sign_name,
					merchantType: info.merchant_type || 'ENTERPRISE',
					entry_status: entry_status,
					remark: info.remark,
					legalPerson: info.legal_person,
					legalPersonID: info.legal_person_id,
					idTimeType: info.id_card_end_date == '长期有效' ? '1' : '0',
					idType: info.id_type,
					idCardStartDate: info.id_card_start_date,
					idCardEndDate: info.id_card_end_date == '长期有效' ? '' : info.id_card_end_date,
					linkman: info.linkman,
					linkPhone: info.link_phone,
					linkManId: info.link_man_id,
					bankCode: info.bank_code,
					accountName: info.account_name,
					accountNo: info.account_no,
					settleBankType: info.settle_bank_type || 'TOPUBLIC',
					settlementPhoneNo: info.settlement_phone_no,
					businessLicense: info.business_license,
					address: info.address,
					businessDateLimitType: info.business_date_limit == '11111111' ? '1' : '0',
					businessDateStart: info.business_date_start == '11111111' ? '' : info.business_date_start,
					businessDateLimit: info.business_date_limit == '11111111' ? '' : info.business_date_limit,
				};
				if (!info.merchant_no && !info.sign_name && !info.merchant_type) {
					state.type = 'add';
				} else {
					state.type = 'edit';
				}
			});
		};

		// 新增供应商进件
		const _supplierMchidHlbAdd = (params: any) => {
			supplierMchidHlbAdd(params)
				.then((res: any) => {
					console.log(res);
					ElMessage.success('操作成功');
					onCancel();
					callback();
				})
				.catch(() => {
					state.submitLoading = false;
				});
		};
		// 修改供应商进件
		const _supplierMchidHlbEdit = (params: any) => {
			supplierMchidHlbEdit(params)
				.then((res: any) => {
					console.log(res);
					ElMessage.success('操作成功');
					onCancel();
					callback();
				})
				.catch(() => {
					state.submitLoading = false;
				});
		};
		return {
			formRef,
			onSubmitForm,
			openDialog,
			onCancel,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
